
import React,{Component} from 'react'
import {Option, regionalPie} from 'action/sellOption'

 export default class  regionalAnalyze extends Component{
 	
 	init(){
 		
 		let App=echarts.init(document.querySelector('#regionalTrend')),
 				App1=echarts.init(document.querySelector('#regionalPie1')),
 				App2=echarts.init(document.querySelector('#regionalPie2')),
 				App3=echarts.init(document.querySelector('#regionalPie3')),
 				App4=echarts.init(document.querySelector('#regionalPie4')),
 				App5=echarts.init(document.querySelector('#regionalPie5'));
 		
 		App.setOption(Option());
 		App1.setOption(regionalPie('yo','rgb(89,140,217)'));
 		App2.setOption(regionalPie('yo','rgb(248,208,72)'));
 		App3.setOption(regionalPie('yo','rgb(97,202,222)'));
 		App4.setOption(regionalPie('yo','rgb(112,202,142)'));
 		App5.setOption(regionalPie('yo','rgb(210,56,45)'));
 		
 	}
 	
 	componentDidMount(){
 		
		let w=(window.getComputedStyle(
				document.querySelector('#regionalAnalyze'))).width.replace('px','');
			
		document.querySelector('#regionalTrend').width=w;
 		
		this.init();
 	}
 	
 	render(){
 		return(
 			<div id="regionalAnalyze" >
 				<div className="regional">
 					<h2>Performance analysis</h2>
 				</div>
 				<article>
	 				<div className="regionalPie ad-fl">
	 					<canvas id="regionalPie1" className="regionalPie1"></canvas>
	 					<span>东区 2017</span>万
	 				</div>
	 				<div className="regionalPie">
	 					<canvas id="regionalPie2" className="regionalPie1 "></canvas>
	 					<span>南区 2017</span>万
	 				</div>
	 				<div className="regionalPie">
	 					<canvas id="regionalPie3" className="regionalPie1"></canvas>
	 						 <span>中区2017</span>万
	 				</div>
	 				<div className="regionalPie">
	 					<canvas id="regionalPie4" className="regionalPie1 "></canvas>
	 						<span>西区 2017</span>万
	 				</div>
	 				<div className="regionalPie">
	 					<canvas id="regionalPie5" className="regionalPie1 "></canvas>
	 						<span>北区 2017</span>万
	 				</div>
	 			</article>
	 			<article>
	 				<canvas id="regionalTrend" height="416px">
	 				</canvas>
	 			</article>
 			</div>
 		)
 	}
 }
	
